<template>
	<div class="storeBox" ref="container">
		<div class="storeBox-box" v-for="(item, index) in storeList" :key="index">
			<div class="store-cent-left">
				<div class="store-name">{{ item.name }}</div>
				<div class="store-address">{{ item.address }}</div>
				<div class="store-address">
					电话：
					<text class="store-phone" @click="call(item.telephone)">{{ item.telephone }}</text>
					<!-- <text class="store-phone">门店详情</text> -->
				</div>
			</div>
			<div class="row-right" @click.stop="checked(item)">去下单</div>
		</div>
		<Loading :loaded="loaded" :loading="loading"></Loading>
	</div>
</template>

<script>
import Loading from '@/components/Loading';
import { storeListApi } from '@/api/store';
import { isWeixin } from '@/utils/index';

import { mapGetters } from 'vuex';
const LONGITUDE = 'user_longitude';
const LATITUDE = 'user_latitude';
const MAPKEY = 'mapKey';
export default {
	name: 'storeList',
	components: {
		Loading
	},
	// computed: mapGetters(["goName"]),
	data() {
		return {
			page: 1,
			limit: 20,
			loaded: false,
			loading: false,
			storeList: [],
			system_store: {},
			// mapKey: cookie.get(MAPKEY),
			locationShow: false,
			user_latitude: 0,
			user_longitude: 0
		};
	},
	onLoad() {
		try {
			this.user_latitude = uni.getStorageSync('user_latitude');
			this.user_longitude = uni.getStorageSync('user_longitude');
		} catch (e) {
			// error
		}
	},
	mounted() {
		if (this.user_latitude && this.user_longitude) {
			this.getList();
		} else {
			this.selfLocation();
			this.getList();
		}
		// this.$scroll(this.$refs.container, () => {
		//   !this.loading && this.getList();
		// });
	},
	methods: {
		call(phone) {
			uni.makePhoneCall({
				phoneNumber: phone
			});
		},
		selfLocation() {
			let self = this;
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					try {
						uni.setStorageSync('user_latitude', res.latitude);
						uni.setStorageSync('user_longitude', res.longitude);
					} catch {}
					self.getList();
				},
				complete: function() {
					self.getList();
				}
			});
		},
		showMaoLocation(e) {
			uni.openLocation({
				latitude: Number(e.latitude),
				longitude: Number(e.longitude),
				success: function() {
					console.log('success');
					Number;
				}
			});
		},
		// 选中门店
		checked(e) {
			uni.$emit('handClick', {
				address: e
			});
			uni.navigateBack();
		},
		// 获取门店列表数据
		getList: function() {
			if (this.loading || this.loaded) return;
			this.loading = true;
			let data = {
				latitude: this.user_latitude || '', //纬度
				longitude: this.user_longitude || '', //经度
				page: this.page,
				limit: this.limit
			};
			storeListApi(data)
				.then(res => {
					this.loading = false;
					this.loaded = res.data.length < this.limit;
					this.storeList.push.apply(this.storeList, res.data);
					this.page = this.page + 1;
				})
				.catch(err => {
					this.$dialog.error(err);
				});
		}
	},
	onReachBottom() {
		this.getList();
	}
};
</script>

<style>
.geoPage {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	z-index: 10000;
}

.storeBox {
	width: 100%;
	background-color: #fff;
	padding: 0 30rpx;
}

.storeBox-box {
	width: 100%;
	height: auto;
	display: flex;
	align-items: center;
	padding: 23rpx 0;
	justify-content: space-between;
	border-bottom: 1px solid #eee;
}

.store-cent {
	display: flex;
	align-items: center;
	width: 80%;
}

.store-cent-left {
	flex: 1;
	margin-right: 20rpx;
}

.store-img {
	width: 120rpx;
	height: 120rpx;
	border-radius: 6rpx;
	margin-right: 22rpx;
}

.store-img img {
	width: 100%;
	height: 100%;
}

.store-name {
	color: #282828;
	font-size: 30rpx;
	margin-bottom: 10rpx;
	font-weight: 800;
}

.store-address {
	line-height: 40rpx;
	font-size: 24rpx;
	color: #666666;
}

.store-phone {
	margin-right: 20rpx;
	color: #2196f3;
}

.store-distance {
	font-size: 22rpx;
	color: #e83323;
}

.iconfont {
	font-size: 20rpx;
}

.row-right {
	width: 20%;
	height: 80rpx;
	line-height: 80rpx;
	border-left: solid 1px #ccc;
	text-align: center;
}
</style>
